<style lang="scss" scoped>
  .u-item{
    width: 100%; height: 79px;
    border-bottom: 1px solid #E5E5E5;
    line-height: 79px;
    font-size: 16px;
    color: #000;
  }
  .u-item-label{
    float: left;
    &>button{
      font-size: 16px;
      color: #000;
      background: transparent;
      color: #39B866;
      margin-left: 5px;
    }
  }

  .u-item-text{
    float: right;
  }

  .u-red{
    color: #FF523E;
  }

  .u-green{
    color: #39B866;
  }

  .u-orange{
    color: #F5A623;
  }
</style>

<template>
  <div class="u-item" ref="item">
    <div class="u-item-label">{{label}} <slot name="label"></slot></div>
    <div class="u-item-text" :class="{'u-red': red, 'u-green': green, 'u-orange': orange}" v-html="text"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        red: false,
        green: false,
        orange: false
      }
    },
    props: {
      label: '',
      text: ''
    },
    mounted () {
      this.red = this.$refs.item.hasAttribute('red')
      this.green = this.$refs.item.hasAttribute('green')
      this.orange = this.$refs.item.hasAttribute('orange')
    }
  }
</script>